<template>
  <div class="administrators">
    <div class="search">
      <el-input
          placeholder="请输入用户名"
          class="searchInput"
          v-model="serchForm.userName"
          clearable>
      </el-input>
      <el-button type="primary">查询</el-button>
      <el-button type="warning">重置</el-button>
      <el-button type="success" @click="dialogVisible=true">新增管理员</el-button>
    </div>
    <div class="tables">
      <el-table
          :data="tableData"
          border
          style="width: 1200px"
      >
        <el-table-column
            prop="id"
            label="id"
            width="180"
            align="center">
        </el-table-column>
        <el-table-column
            prop="name"
            label="用户名"
            width="180"
            align="center">
        </el-table-column>
        <el-table-column
            prop="phone"
            label="联系方式"
            width="180"
            align="center">
        </el-table-column>
        <el-table-column
            prop="address"
            label="最近登录时间"
            align="center">
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="300"
            align="center"
        >
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">重置密码</el-button>
            <el-button type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--    产品新增-->
    <el-dialog
        title="管理员新增"
        :visible.sync="dialogVisible"
        width="500px"
        :before-close="handleClose">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="ruleForm.phone"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: "administrators",
  data() {
    const phoneRule = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('手机号不能为空'));
      } else if (!/^1[3-9]\d{9}$/.test(value)) {
        return callback(new Error('请输入有效的手机号码'));
      } else {
        callback();
      }
    };
    return {
      dialogVisible: false,
      ruleForm: {
        name: '',
        password: '',
        phone: ''
      },
      rules: {
        name: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 3,  message: '长度在3个字符以上', trigger: 'blur'}
        ],
        password:
            {required: true, message: '请输入密码', trigger: 'blur'},
        // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        phone: [
          {validator: phoneRule, trigger: 'blur', } // 触发时机是失去焦点时验证
        ]

      },
      serchForm: {
        userName: '',
      },
      tableData: [
        {
          id: 1,
          name: '测试',
          address: null,
        }
      ]
    }
  },
  methods: {
    //密码重置
    handleClick(row) {
      console.log(row)
    },
    //弹窗关闭
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
    },

  }
}
</script>

<style scoped lang="scss">
.administrators {
  background: #fff;
  height: 100%;
  border-radius: 10px;

  .search {
    display: flex;
    align-items: center;
    height: 90px;
    margin-left: 20px;

    .searchInput {
      width: 300px;
      margin-right: 10px;
    }
  }

  .tables {
    margin: 20px;

    .el-table {
      th.el-table__cell > .cell {
        display: flex !important;
      }
    }
  }
}

</style>